<template>
	<div class="margin-top">
		<Header/>
		<div class="details" v-loading="loading">
			<div class="title">{{ details.name }}</div>
			<div class="date">{{ details.date }}</div>
			<div class="content" v-html="details.details"></div>
		</div>
		<Footer />
	</div>
</template>

<script>
	import Header from '@/components/Header'
	import Footer from '@/components/Footer'
	import {
		getAbout
	} from "@/api";
	import {
		about
	} from "@/lang";
	export default {
		name: 'about',
		components: {
			Header,
			Footer
		},
		data() {
			return {
				langCode: '',
				title: '',
				about: about,
				details:'',
				loading:false
			}
		},
		created() {
			const lang = localStorage.getItem('lang');
			this.langCode = lang === "ZH" ? 0 : 1;
			this.setPageLanguage(lang)
			this.getData();
		},
		methods: {
			async getData() {
				this.loading = true
				let self = this;
				const res = await getAbout({
					lang: self.langCode,
				});
				this.details = res.about
				this.loading = false
			},
			setPageLanguage(_lang) {
				const lang = _lang.toLowerCase()
				this.title = this.about.title[lang]
			},
			changeLanguage(lang) {
				this.langCode = lang === "ZH" ? 0 : 1;
				this.setPageLanguage(lang);
				this.getData();
			},
		}
	}
</script>

<style scoped lang="less">
	.details {
		width: 1200px;
		margin: 0 auto;
		min-height:45vh;
		.title {
			text-align: center;
			font-size: 18px;
			color: #333;
			font-weight: 600;
		}

		.date {
			margin-top: 20px;
			border-bottom: 1px solid #eee;
			color: #999;
			text-align: center;
			padding-bottom: 20px;
			margin-bottom: 20px;
		}
	}
</style>
